<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<% String basePath = request.getScheme()+"://" + request.getServerName()+":"
+request.getServerPort()+request.getContextPath()+"/";%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>


	<link re="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>


<script type="text/javascript">

	$(function(){
		$("#addBtn").click(function () {
			$(".time").datetimepicker({
				minView:"month",
				language:"zh-CN",
				format:"yyyy-mm-dd",
				autoclose:true,
				todayBtn:true,
				pickerPosition:"bottom-left"
			});

		    /**
			 * 操作模态窗口的方式
			 * */
			// alert(123);
			// $("#createActivityModal").modal("show");

			//为所有者信息列表获取值
			$.ajax({
				url : "workbench/activity/getUserList.do",
				data : {},
				type : "get",
				dataType : "json",
				success : function (data) {
					/**
					 * List<User> uList
					 * */

					var html = "<option></option>";

					$.each(data,function (i,n) {
						html +="<option value='"+n.id+"'>"+n.name+"</option>";
                    })

					$("#create-owner").html(html);

					//使当前的默认框是当前登录用户
					//在JS中使用el表达式，el表达式一定要套用在字符串中
					var id = "${user.id}";

					$("#create-owner").val(id);

                    $("#createActivityModal").modal("show");
                }
				}
			)
        })


		//绑定事件来执行添加操作
		$("#saveBtn").click(function () {
			$.ajax({
				url : "workbench/activity/save.do",
				
				data : {
                    "owner" :$.trim($("#create-owner").val()),
                    "name":$.trim($("#create-name").val()),
                    "startDate":$.trim($("#create-startDate").val()),
                    "endDate":$.trim($("#create-endDate").val()),
                    "cost":$.trim($("#create-cost").val()),
                    "description":$.trim($("#create-description").val())
                },
				
				type : "post",
				dataType : "json",
				success : function (data) {

				    if (data.success) {
				        //添加成功后，刷新市场活动信息列表（局部刷新）

                        //清空添加操作模态窗口中的数据
                        //该方法用不了Jquery对象使用
                        // $("#activityAddForm").reset();
                        // $("#activityAddForm")[0].reset();

						//关闭添加操作的模态窗口
						$("#createActivityModal").modal("hide");
					} else{
				        alert("添加市场失败")
					}

                }
			})
        })

        pageList(1,2);
		$("#search-button").click(function () {


		    $("#hidden-name").val($.trim($("#search-name").val()));
            $("#hidden-owner").val($.trim($("#search-owner").val()));
            $("#hidden-startDate").val($.trim($("#search-startDate").val()));
            $("#hidden-endDate").val($.trim($("#search-endDate").val()));

            pageList(1,2);
        })

		$("#qx").click(function () {

		    $("input[name=dx]").prop("checked",this.checked);
			
        })
			/*
			* 这种方式不行，因为动态生成的元素，是不能够以普通绑定事件的形式来进行操作的
			*
			* 动态生成的元素，我们要以on方法的形式来触发事件
			*
			* 语法：
			* $(需要绑定元素的有效的外层元素).on(绑定事件的方式，需要绑定的元素的jQuery对象，回调函数)
			* */
        // $("input[name=dx]").click()

		$("#activity-body").on("click",$("input[name=dx]"),function () {
            $("#qx").prop("checked",$("input[name=dx]").length==$("input[name=dx]:checked").length);
        })

		$("#deleteBtn").click(function () {
			//找到复选框中挑勾的复选框的jQuery对象
			var $dx = $("input[name=dx]:checked");
			if ($dx.length == 0) {
			    alert("请选择要删除的市场活动！");
			}else {

			    if (confirm("确定删除所选的记录吗？")) {
                    //url:workbench/activity/delete.do
                    var param = "";
                    //将$dx中的每一个dom对象遍历出来，取其value值，就相当于取得了需要
                    //删除的记录的id
                    for (var i = 0 ; i < $dx.length ; i++) {
                        param+="id="+$($dx[i]).val();
                        //如果不是最后一条记录，就要在后面追加&符号
                        if (i < $dx.length-1) {
                            param+="&";
                        }
                    }

                    // alert(param);

                    $.ajax({

                        url: "workbench/activity/delete.do",
                        data: param,
                        type : "post",
                        dataType: "json",
                        success: function (data) {
                            /*
                            *
                            *
                            * data
                            * 	{"success":true/flalse}
                            * */

                            if (data.success) {
                                pageList(1,2);
                            } else {
                                alert("市场活动删除失败！");
                            }
                        }
                    })
				}

			}
        })


		$("#editBtn").click(function () {
			//时间选择插件
            $(".time").datetimepicker({
                minView:"month",
                language:"zh-CN",
                format:"yyyy-mm-dd",
                autoclose:true,
                todayBtn:true,
                pickerPosition:"bottom-left"
            });

			var $dx = $("input[name=dx]:checked");

			if ($dx.length == 0) {
			    alert("请选择一条需要修改的记录！")
			} else if ($dx.length >1) {
			    alert("只能选择一条记录进行修改！")
			} else{
			    var id = $dx.val();

		    $.ajax({
				url : "workbench/activity/getUserAndWorkbench.do",
				data :{"id":id},
				type : "get",
				dataType : "json",
				success : function (data) {
					/*
					* data
					* 	用户列表
					* 市场活动对象
					* {"uList":[{用户1}，{用户2}，{用户3}],"a":{市场活动}}
					* */
					var html = "<option></option>";
					$.each(data.uList,function (i,n) {
						html+="<option value='"+n.id+"'>"+n.name+"</option>";
                    })

					$("#edit-marketActivityOwner").html(html);
					$("#edit-id").val(data.a.id);
                    $("#edit-marketActivityOwner").val(data.a.owner);
					$("#edit-marketActivityName").val(data.a.name);
                    $("#edit-startDate").val(data.a.startDate);
                    $("#edit-endDate").val(data.a.endDate);
                    $("#edit-cost").val(data.a.cost);
                    $("#edit-describe").val(data.a.describe);

					$("#editActivityModal").modal("show");
                }
			})


			}
        })

        $("#updateBtn").click(function () {
			$.ajax({
				url : "workbench/activity/updateActivity.do",
				data : {
				    "owner":$.trim($("#edit-marketActivityOwner").val()),
					"name":$.trim($("#edit-marketActivityName").val()),
					"startDate":$.trim($("#edit-startDate").val()),
					"endDate":$.trim($("#edit-endDate").val()),
					"cost":$.trim($("#edit-cost").val()),
					"describe":$.trim($("#edit-describe").val()),
					"id":$("#edit-id").val()
				},
				type : "post",
				dataType : "json",
				success : function (data) {
					/*
					* data
					* {true,false}
					*
					* */
					if (data.success) {
					    $("#editActivityModal").modal("hide");
                        pageList(1,2);

					}else {
					    alert("市场活动修改失败！");
					}
                }
			})
        })
	});

	function pageList(pageNo,pageSize) {
		//刷新分页时将复选框的勾干掉
		$("#qx").prop("checked",false);
	    //查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
        $("#search-name").val($.trim($("#hidden-name").val()));
        $("#search-owner").val($.trim($("#hidden-owner").val()));
        $("#search-startDate").val($.trim($("#hidden-startDate").val()));
        $("#search-endDate").val($.trim($("#hidden-endDate").val()));

	    $.ajax({

            url : "workbench/activity/pageList.do",
            data : {
                //分页查询
                "pageNo" : pageNo,
                "pageSize" : pageSize,
                //条件查询
                "name" : $.trim($("#search-name").val()),
                "owner" : $.trim($("#search-owner").val()),
                "startDate" : $.trim($("#search-startDate").val()),
                "endDate" : $.trim($("#search-endDate").val())
            },
            type : "get",
            dataType : "json",
            success : function (data) {
                /*
                * data
                * 我们需要的
                *   [{市场活动1}，{2}，{3}]
                * 分页插件需要的
                * {"total":100}
                * */

                var html = "";
                $.each(data.dataList,function (i,n) {

                    html+= '<tr class="active">';
                            html+='<td><input type="checkbox" name="dx" value="'+n.id+'"/></td>';
                            html+='<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.id+'\';">'+n.name+'</a></td>';
                            html+='<td>'+n.owner+'</td>';
                            html+='<td>'+n.startDate+'</td>';
                            html+='<td>'+n.endDate+'</td>';
                            html+='</tr>';

                })

                $("#activity-body").html(html);

                //数据处理完毕后，进行分页

				//计算总页数

				var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;

                $("#activityPage").bs_pagination({
                    currentPage: pageNo, // 页码
                    rowsPerPage: pageSize, // 每页显示的记录条数
                    maxRowsPerPage: 20, // 每页最多显示的记录条数
                    totalPages: totalPages, // 总页数
                    totalRows: data.total, // 总记录条数

                    visiblePageLinks: 3, // 显示几个卡片

                    showGoToPage: true,
                    showRowsPerPage: true,
                    showRowsInfo: true,
                    showRowsDefaultInfo: true,

                    onChangePage : function(event, data){
                        pageList(data.currentPage , data.rowsPerPage);
                    }
                })

            }
        })

    }
	
</script>
</head>
<body>
	<input type="hidden" id="hidden-name"/>
	<input type="hidden" id="hidden-owner"/>
	<input type="hidden" id="hidden-startDate"/>
	<input type="hidden" id="hidden-endDate"/>
	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form id="activityAddForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-owner">
								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-startDate" readonly>
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate" readonly>
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">

					<%--data-dismiss="modal"--%>
					<%--表示关闭模态窗口--%>

					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-marketActivityOwner">
								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-marketActivityName">
                            </div>
						</div>
						<input type="hidden" id="edit-id">
						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-startDate" readonly>
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control  time" id="edit-endDate" readonly>
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost">
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="edit-describe"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="search-startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="search-endDate">
				    </div>
				  </div>
				  
				  <button type="button" class="btn btn-default" id="search-button">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus" ></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx"/></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activity-body">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="activityPage"></div>
			</div>
			
		</div>
		
	</div>
</body>
</html>